<template>
	<view>
		<view class="subscribeInfo">
			<view class="infoItem" @click="car=true">
				<view class="label">车牌</view>
				<view class="value">
					<view v-if="carnumberplate"> {{carnumberplate}}</view>
					<view v-else> 请填写</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view>
			<view class="infoItem" @click="type=true">
				<view class="label">车型</view>
				<view class="value">
					<view v-if="cartype"> {{cartype}}</view>
					<view v-else> 请选择</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view>
			<view class="infoItem" @click="color=true">
				<view class="label">颜色</view>
				<view class="value">
					<view v-if="carcolor"> {{carcolor}}</view>
					<view v-else> 请选择</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view>
			<view class="infoItem">
				<view class="label">联系人</view>
				<view class="value">
					<view>
						<u-input v-model="contacts" :type="text" :border="false" input-align="right" placeholder="请填写联系人"/>
					</view>
				</view>
			</view>
			<view class="infoItem">
				<view class="label">电话</view>
				<view class="value">
					<view>
						<u-input v-model="telephone" :type="text" :border="false" input-align="right" placeholder="请填写联系电话"/>
					</view>					
				</view>
			</view>
			<view class="infoItem" @click="autoInsuranceShow = true">
				<view class="label">车险到期时间</view>
				<view class="value" >
					<view>
						{{autoInsurance}}
					</view>
				</view>
			</view>
			<view class="infoItem" @click="insureShow = true">
				<view class="label">保险到期时间</view>
				<view class="value">
					<view>
						{{insure}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="image">
			<view class="image-top">
				<view class="top-title">
					车辆图片
				</view>
				<view class="top-tishi">
					（禁止上传不良图片）
				</view>
				<view class="top-content">
					<u-upload
						ref="uUpload"
						:action="action"
						:auto-upload="true"
						:file-list="carList"
						max-count="1"
						name="image"
						size-type="['compressed']"
						@on-change="getImage"
						>
					</u-upload>
				</view>
			</view>
		</view>
		
		<view class="image">
			<view class="image-top">
				<view class="top-title">
					行驶证图片(可选)
				</view>
				<view class="top-tishi">
					（审核通过相关的产品资料）
				</view>
				<view class="top-content" style="background-image: url(https://adjyxw.h1668.com/uploads/20230907/5c17b64969419803cc522c32b252c1b3.jpg);background-size: 100%;">
					<u-upload
						ref="uUploads"
						:action="action"
						:auto-upload="true"
						:file-list="xszlist"
						max-count="1"
						name="image"
						size-type="['compressed']"
						max-size="3145728"
						@on-change="getxszImage"
						>
					</u-upload>
				</view>
			</view>
		</view>
		
		<view class="show">
			<view class="show-title">
				<radio :checked="value" />同意本小程序获取以上信息
			</view>
			<view class="show-content">
				<text>以上信息将仅用于展示给您提供服务的师傅，已便于师傅寻找车辆以及联系车主</text>
			</view>
		</view>
		
		<view class="buttom">
			<view class="buttom-left">
				<u-button type="default" @click="cancel">取消</u-button>
			</view>
			<view class="buttom-right">
				<u-button type="primary" @click="save">修改</u-button>
			</view>
		</view>
		
		<u-keyboard ref="uKeyboard" mode="car" v-model="car" :mask="false" @confirm="carConfirm" @change="valChange" @backspace="backspace"></u-keyboard>
		<u-popup v-model="type" mode="bottom" :mask="false" height="300px">
			<view class="title">
				请选择您的车辆类型
			</view>
			<view class="content">
				<view class="content-item" @click="carttype(1)">
					<image src="../static/1.png" mode=""></image>
					<text>轿车</text>
				</view>
				<view class="content-item" @click="carttype(2)">
					<image src="../static/2.png" mode=""></image>
					<text>SUV</text>
				</view>
				<view class="content-item" @click="carttype(3)">
					<image src="../static/3.png" mode=""></image>
					<text>七座及以上</text>
				</view>
			</view>
			<view class="bottom">
				请按您的车辆如实选择
			</view>
		</u-popup>
		<u-popup v-model="color" mode="bottom" :mask="false" height="300px">
			<view class="color">
				<view class="colorone">
					<view class="colorone-item" @click="selectColor(1)">
						<view style="background-color: black;height: 30px;width: 80px;"></view>
						<text>黑色系</text>
					</view>
					<view class="colorone-item" @click="selectColor(2)">
						<view style="background-color: #ffffff;height: 30px;width: 80px;"></view>
						<text>白色系</text>
					</view>
					<view class="colorone-item" @click="selectColor(3)">
						<view style="background-color: #808080;height: 30px;width: 80px;"></view>
						<text>灰色系</text>
					</view>
					<view class="colorone-item" @click="selectColor(4)">
						<view style="background-color: #e6e8fa;height: 30px;width: 80px;"></view>
						<text>银色系</text>
					</view>
				</view>
				<view class="colortow">
					<view class="colortow-item" @click="selectColor(5)">
						<view style="background-color: #7b3b01;height: 30px;width: 80px;"></view>
						<text>棕色系</text>
					</view>
					<view class="colortow-item" @click="selectColor(6)">
						<view style="background-color: #cc1100;height: 30px;width: 80px;"></view>
						<text>红色系</text>
					</view>
					<view class="colortow-item" @click="selectColor(7)">
						<view style="background-color: #194bb1;height: 30px;width: 80px;"></view>
						<text>蓝色系</text>
					</view>
					<view class="colortow-item" @click="selectColor(8)">
						<view style="background-color: #e5ba0f;height: 30px;width: 80px;border: #808080 1 solid;"></view>
						<text>黄色系</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				如您需要的颜色未在以上列出请输入
			</view>
			<view class="bottomone">
				<view class="">
					<u-input v-model="carcolor" type="text" :border="false" input-align="center" placeholder="请输入颜色"/>
				</view>
			</view>
			<view class="bottomtow">
				<view class="">
					<u-button type="primary" @click="color=false">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-picker v-model="autoInsuranceShow" mode="time" :params="params" @confirm="carInsureConfirm"></u-picker>
		<u-picker v-model="insureShow" mode="time" :params="params" @confirm="insureConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carparkId: 0,
				info: [{
					numberplate: '',
					contacts: '陈三生',
					telephone: '13750076733',
					color: '白色',
					type: 'SUV',
					show: false,
					id: 1
				}],
				car: false,
				carnumberplate: '',
				type: false,
				cartype: '',
				color: false,
				carcolor: '',
				contacts: '',
				telephone: '',
				value: true,
				userData: {},
				action: 'https://adjyxw.h1668.com/home/product/Product/upload',//图片上传路径
				imageUrl: '',
				xszimageUrl: '',
				carList: [],
				xszlist: [],
				insure: '请选择保险到期时间',
				autoInsurance: '请选择车险到期时间',
				autoInsuranceShow: false,
				insureShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			};
		},
		onLoad(options) {
			this.carparkId = options.id
			this.getCarparkDetail()
		},
		onShow() {
			this.userData = uni.getStorageSync('userData')
		},
		methods: {
			carInsureConfirm(e) {
				this.autoInsurance = e.year + '-' + e.month + '-' + e.day
			},
			insureConfirm(e) {
				this.insure = e.year + '-' + e.month + '-' + e.day
			},
			//行驶证图片
			getxszImage() {
				const { lists } = this.$refs.uUploads;
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				const files = lists.filter(val => val.progress === 100);
				this.xszimageUrl = files.slice(0, 2).map(file => file.response.result).join(',');
			},
			getCarparkDetail() {
				uni.request({
					url: uni.getStorageSync('URL') + '/home/carpark/Carpark/carparkDetail',
					method: 'POST',
					data: {
						carparkId: this.carparkId,
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						if(res.statusCode == 200) {
							let result = res.data.data
							this.carnumberplate = result.carnumberplate
							this.cartype = result.cartype
							this.carcolor = result.carcolor
							this.contacts = result.contacts
							this.telephone = result.mobile
							this.carList = result.car_img
							this.imageUrl = result.carImg
							this.xszlist = result.xsz_Img
							this.autoInsurance = result.autoInsurance
							this.insure = result.insure
						}
					}
				})
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.carnumberplate += val;
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.carnumberplate.length) this.carnumberplate = this.carnumberplate.substr(0, this.carnumberplate.length - 1);
			},
			//获取车辆图片修改后的路径
			getImage() {
				const { lists } = this.$refs.uUpload;
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				const files = lists.filter(val => val.progress === 100);
				this.imageUrl = files.slice(0, 6).map(file => file.response.result).join(',');
				console.log(this.imageUrl)
			},
			carConfirm() {
				this.info.numberplate = this.carnumberplate
			},
			carttype(value) {
				this.type = false
				if(value == 1){
					this.cartype = '轿车'
				}else if(value == 2) {
					this.cartype = 'SUV'
				}else{
					this.cartype = '七座及以上'
				}
			},
			selectColor(value) {
				this.color = false
				switch (value) {
					case 1:
						this.carcolor = '黑色'
					break;
					case 2:
						this.carcolor = '白色'
					break;
					case 3:
						this.carcolor = '灰色'
					break;
					case 4:
						this.carcolor = '银色'
					break;
					case 5:
						this.carcolor = '棕色'
					break;
					case 6:
						this.carcolor = '红色'
					break;
					case 7:
						this.carcolor = '蓝色'
					break;
					case 8:
						this.carcolor = '黄色'
					break;
				}
			},
			cancel() {
				console.log(1)
			},
			save() {
				if(this.value == false) {
					uni.showToast({
						icon: none,
					    title: '请勾选同意获取信息',
					    duration: 2000
					})
				}else{
					uni.request({
						url: uni.getStorageSync('URL') + '/home/carpark/Carpark/carparkEdit',
						method: 'POST',
						data: {
							carpark: this.carparkId,
							carnumberplate: this.carnumberplate,
							cartype: this.cartype,
							carcolor: this.carcolor,
							contacts: this.contacts,
							telephone: this.telephone,
							userid: this.userData.id,
							imageUrl: this.imageUrl,
							xszUrl: this.xszimageUrl,
							insure: this.insure,
							autoInsurance: this.autoInsurance
						},
						header: {
							"X-Requested-With": "XMLHttpRequest"
						},
						dataType: 'json',
						success: (res) => {
							if(res.statusCode == 200) {
								setTimeout(() => {
									uni.showToast({
										icon: 'none',
										title: '修改成功',
									});
									setTimeout(() => {
										uni.hideToast();
										//关闭提示后跳转
										uni.reLaunch({
											url: '/pagesB/cart_info/cart_info'
										})
									}, 1500)
								}, 0);
							}
						}
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
.subscribeInfo {
	margin-top: 20rpx;

	.infoItem {
		height: 76rpx;
		display: flex;
		color: #5D5C5C;
		border-bottom: 1px solid #F1F1F1;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		padding: 0 30rpx;
		margin-top: 20rpx;

		.label {
			font-size: 34rpx;
		}

		.value {
			font-size: 32rpx;
			display: flex;
			margin-right: 10rpx;

			.icon {
				width: 40rpx;
			}
		}
	}

	.infoItem:last-child {
		border-bottom: 0;
	}
}
.image{
		background-color: #FFFFFF;
		margin-top: 20rpx;
		.image-top {
			font-size: 34rpx;
			padding: 15px;
		}
		.top-tishi {
			font-size: 25rpx;
		}
	}
.title {
	font-size: 18px;
	margin-left: 15rpx;
}
.content {
	margin-top: 50rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	.content-item {
		width: 30%;
		text-align: center;
		image{
			border: #5D5C5C 1px solid;
			border-radius: 10px;
			width: 100%;
			height: 110px;
		}
		text{
			color: black;
			font-size: 18px;
			font-weight: bold;
		}
	}
}
.bottom {
	text-align: center;
	font-size: 18px;
	margin-top: 60rpx;
}
.bottomone {
	width: 100%;
	margin: 0 auto;
}
.bottomtow {
	width: 50%;
	margin: 15px auto
}
.color {
	margin-top: 20rpx;
	.colorone, .colortow{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		.colorone-item, .colortow-item {
			view{
				border: #5D5C5C 1px solid;
				border-radius: 5px;
			}
		}
	}
	.colortow {
		margin-top: 10px;
	}
}
.show {
	width: 90%;
	margin: 0 auto;
	.show-title {
		margin-top: 50px;
		font-size: 18px;
	}
	.show-content{
		margin-left: 50rpx;
		color: #5D5C5C;
	}
}
.buttom {
	width: 100%;
	margin-top: 30px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	.buttom-left, .buttom-right {
		width: 35%;
	}
}
</style>
